<template>
    <section id="login-page">
      <main class='banner'></main>
       <article class="wrap-box wui-border-tb login-msg">
         <w-field name="Mobile" v-model="Mobile" label-width="50" icon-width="100" height="40"  placeholder="用户名" class="inp-row">
            <w-row slot="label">
                <w-cell>
                   <i class='login-name-icon'></i>
                </w-cell>
                 <w-cell class="line">
                   <span></span>
                 </w-cell>
            </w-row>
         </w-field>
      </article>
      <article class="wrap-box wui-border-tb login-msg">
         <w-field type="password" name="PassWord" v-model="PassWord" label-width="50" icon-width="100" height="40" placeholder="密码" class="inp-row">
            <w-row slot="label">
                <w-cell>
                   <i class='login-mobile-icon'></i>
                </w-cell>
                 <w-cell class="line"> 
                   <span></span>
                 </w-cell>
            </w-row>
         </w-field>
      </article>
      <!--<article class="wrap-box wui-border-tb login-msg">
         <w-field name="Hospital" v-model="Hospital" label-width="50" icon-width="100" height="40" placeholder="医院" class="inp-row">
            <w-row slot="label">
                <w-cell>
                   <i class='login-hos-icon'></i>
                </w-cell>
                 <w-cell class="line"> 
                   <span></span>
                 </w-cell>
            </w-row>
         </w-field>
      </article>-->
      <article class="padding-submit">
            <w-button size="large" type="primary" :plain="plain" :bgColor="bgColor" fontColor="#ffffff" :block="isBlock" borderColor="borderColor"  @click="loginUser()">登  录</w-button>
      </article>
    </section>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';
export default {
    name: 'login',
    props: {

    },
    data() {
        return {
            isBlock: true,
            bgColor: "#005ba8",
            plain: false,

            Mobile: '',
            PassWord: '',
            Hospital: ''
        }
    },
    methods: {  
        ...mapActions([
            'login'
        ]),
        loginUser: function() {
            let phoneValide = /^(1[0-9])\d{9}$/;
            if (!phoneValide.test(this.Mobile)) {
                Wui.Toast.show('请输入正确的手机号', 'middle');
                return false;
            }
            if (this.PassWord.replace(/\s+$|^\s+/g, "") == '') {
                Wui.Toast.show('请输入密码', 'middle');
                return false;
            }
            // if (this.Hospital.replace(/\s+$|^\s+/g, "") == '') {
            //     Wui.Toast.show('请输入医院', 'middle');
            //     return false;
            // }

            let params = {
                UserName: this.Mobile,
                PassWord: this.PassWord
                //Hospital: this.Hospital
            }
            this.login(params).then((res) => {
                  window.Wui.Toast.show(res.msg, 'middle');
                  if(res.Result == 'success') {
                    //纪录用户信息
                    var _user = JSON.stringify(res.userInfo)
                    localStorage.setItem('userMsg',_user);
                    setTimeout(function() {
                        location.href = '#/apply';
                    }, 1500);
                  }
            });
 
        }
    }

}
</script>

<style lang="scss" scoped>
   #login-page {
       .banner {
           width: 18.75rem;
           height: 10.625rem;
           background: url('../../assets/img/login/banner.png') 0 0 no-repeat;
           background-size: cover;
       }
       .login-msg {
           width: 80%;
           margin: 2rem auto;
           border: 1px solid #e1e1e1;
           border-radius: 8px;
           margin-bottom: -0.6rem;
           background: #f2f2f2;
           padding: 0 1rem 0 1rem;
           i {
               width: 1.2rem;
               height: 1.45rem;
           }
           .login-name-icon {
               background: url('../../assets/img/login/login-name.png') center no-repeat;
           }
            .login-mobile-icon {
               background: url('../../assets/img/login/login-mobile.png') center no-repeat;
           }
            .login-hos-icon {
               background: url('../../assets/img/login/login-hos.png') center no-repeat;
           }
           .line {
               display: flex;
               justify-content: center;
           }
           .line span {
              display: inline-block;
              width: 1px;
              height: 34px;
              background: url('../../assets/img/login/line.png') 0 0 no-repeat;
           }
       }
       .padding-submit {
           width: 90%;
           margin: 3rem auto;
       }
       .wui-field {
           background: none !important;
       }
       .wui-border-1px {
           position: static !important;
       }
    //    ::-webkit-input-placeholder { /* WebKit browsers */ 
    //      font-size: 16px;
    //    } 
     .wui-button:after {
        height: 0 !important;
        width: 0 !important;
    }
    .wui-border-1px:after {
        border: 0 !important;
    }
   }
</style>